import React, { forwardRef,useState,useEffect } from 'react'
import { Form,Input,Select } from 'antd'
const { Option } = Select;
const UserForm=forwardRef((props,ref) => {
    const [isDisabled, setisDisabled] = useState(false)
    // 在添加用户时对区域进行校验
    useEffect(() => {
        setisDisabled(props.isUpdateDisabled)
    }, [props.isUpdateDisabled])

    // 获取当前roleId
    const {roleId,region}=JSON.parse(localStorage.getItem("token"))
    // 判断是否有编辑区域的权限
    const checkRegionDisabled=(item)=>{
            // 1.编辑用户时
        if(props.isUpdate){
            // 1.1超级管理员
            if(roleId===1){
                return false
            }else{ //1.2普通管理员
                return true
            }
        }else{  // 2、添加用户时
            // 2.1超级管理员
            if(roleId===1){
                return false
            }else{ //2.2普通管理员
                // 当为区域管理员自己管理的区域时返回false即不禁用
                return item.value!==region
            }
        }
    }
    // 判断是否有编辑管理员身份的权限
    const checkRoleDisabled=(item)=>{
        // 1.编辑用户时
        if(props.isUpdate){
            // 1.1超级管理员去添加，不禁用区域
            if(roleId===1){
                return false
            }else{ //1.2普通管理员
                return true
            }
        }else{  // 2、添加用户时
            // 2.1超级管理员
            if(roleId===1){
                return false
            }else{ //2.2普通管理员去添加
                // 将超级管理员和普通管理员禁用
                return item.id!==3
            }
        }
    }
    return (
        <div>
            <Form
                layout="vertical"
                ref={ref} >
                {/* 用户名 */}
                <Form.Item
                    name="username"
                    label="用户名"
                    rules={[
                        {
                            required: true,
                            message: '请输入用户名',
                        },
                    ]}
                >
                    <Input />
                </Form.Item>
                {/* 密码 */}
                <Form.Item
                    name="password"
                    label="密码"
                    rules={[
                        {
                            required: true,
                            message: '请输入密码',
                        },
                    ]}
                >
                    <Input />
                </Form.Item>
                {/* 区域项 */}
                <Form.Item
                    name="region"
                    label="区域"
                    rules={isDisabled?[]:[
                        {
                            required: true,
                            message: '请输入区域名字',
                        },
                    ]}
                >
                    <Select disabled={isDisabled}>
                        {
                            props.regionList.map(item => {
                                return (
                                    <Option value={item.value} 
                                    key={item.id} disabled={checkRegionDisabled(item)}>{item.title}</Option>
                                )
                            })
                        }
                    </Select>
                </Form.Item>
                {/* 角色项 */}
                <Form.Item
                    name="roleId"
                    label="角色"
                    rules={[
                        {
                            required: true,
                            message: '请输入角色名',
                        },
                    ]}
                >
                    <Select onChange={(value)=>{
                        // 如果是超级管理员则区域禁用，默认为空
                        if(value===1){
                            setisDisabled(true)
                            ref.current.setFieldsValue({
                                region:""
                            })
                        }else{
                            setisDisabled(false)
                        }
                    }}>
                        {
                            props.roleList.map(item => {
                                return (
                                    <Option disabled={checkRoleDisabled(item)}
                                     value={item.id} key={item.id}>{item.roleName}</Option>
                                )
                            })
                        }
                    </Select>
                </Form.Item>
            </Form>
        </div>
    )
})
export default UserForm